<template>
    <Layout :items="['管理系统','角色管理']" >
        <el-tabs v-model="active">
            <el-tab-pane label="查看" name="show">
                <el-form :inline="true">
                    <el-form-item label="名称">
                        <el-input type="text" v-model="searchValue" :clearable="true"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button :icon="Search" circle type="primary" @click="handleSearch" />
                    </el-form-item>
                </el-form>
                <el-table :data="roleData">
                    <el-table-column label="ID" prop="id" align="center" width="100px"></el-table-column>
                    <el-table-column label="角色名称" prop="name"></el-table-column>
                    <el-table-column label="创建时间" prop="create_time"></el-table-column>
                    <el-table-column label="是否可用" prop="auth"></el-table-column>
                    <el-table-column label="操作">
                        <template #default="{row} "><!-- 当前这一行数据对象 -->
                            <el-button size="small" type="danger" @click="handleEdit(row.id)">编辑</el-button>
                            <el-button size="small" type="warning" @click="handleDelete(row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页器 -->
                <el-row style="height: 60px;" justify="center" align="middle">
                    <el-pagination layout="prev, pager, next" :total="total" v-model:page-size="limit"
                        v-model:current-page="page" @current-change="getData" />
                    <!--  <el-pagination layout="prev,pager,next" :total="total" v-model:page-size="limit"
                V-model:current-page="page"  @current-change="getData" /> -->
                </el-row>
            </el-tab-pane>
            <!-- 添加烂 -->
            <el-tab-pane label="添加" name="add">
                <el-row>
                    <el-cor :span="12">
                        <el-form label-width="80px" :model="roleForm" :rules="roleRule" ref="roleRef">
                            <el-form-item label="名称" prop="name">
                                <el-input v-model="roleForm.name"></el-input>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-switch active-value="1" inactive-value="0" v-model="roleForm.auth"></el-switch>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="handleRole">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </el-cor>
                </el-row>
            </el-tab-pane>

        </el-tabs>
    </Layout>
    <!-- 编辑功能 -->
    <el-dialog v-model="show" title="编辑信息" width="50%">
        <el-form :model="editForm" :rules="roleRule" ref="editRoleRef">
            <el-form-item label="名称" :label-width=80 prop="name">
                <el-input v-model="editForm.name" autocomplete="off"  />
            </el-form-item>
            <el-form-item label="状态" :label-width=80>
                <el-input v-model="editForm.auth" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="show=false">Cancel</el-button>
                <el-button type="primary" @click="handleUpdate">
                    Confirm
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue"//onMounted表示渲染完成
import { getRole, addRole, deleteRole,getOneRole,upData } from "../api/api";
import { Search } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';


//列表传值
const active = ref("show");
const roleData = ref<{ id: number; name: string; create_time: string; auth: number }[]>([])
const page = ref(1);
const limit = ref(3);
const total = ref(0);
const getData = async () => {
    const res = await getRole({ page: page.value, limit: limit.value });
    roleData.value = res.data.data.row;
    total.value = res.data.data.count;
}

onMounted(() => {
    getData();
})

const searchValue = ref("");
const handleSearch = async () => {
    page.value = 1;
    const res = await getRole({ page: page.value, limit: limit.value, name: searchValue.value });
    roleData.value = res.data.data.row;
    total.value = res.data.data.count;
};

//添加栏
const roleForm = reactive({ name: "", auth: 0 })
const roleRef = ref<FormInstance>()
const roleRule: FormRules = {
    name: [{ required: true, message: '请输入用户名', trigger: "blur" }]
}
const handleRole = () => {
    roleRef.value?.validate(async (valid) => {
        if (valid) {
            const res = await addRole(roleForm);

            if (res.data.data.code === 10000) {
                ElMessage.success("添加成功");
                // console.log(router);
                roleRef.value?.resetFields();
                active.value = "show";
                getData();
            } else {
                ElMessage.error("添加失败");
            }
        }
    })
}
//删除功能
const handleDelete = (id: number) => {
    ElMessageBox.confirm(
        '确认删除  ',/* 内容 */
        '警告',/* 标题 */
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await deleteRole(id);
            if (res.data.data.code === 10000) {
                ElMessage.success("删除成功");
                getData();
            }

        })
        .catch(() => {
            ElMessage({
                type: 'warning',
                message: '删除失败',
            })
        })
}
//
//编辑
const show = ref(false);
const editForm = ref({
    id:0,
        name:'',
        create_time:'',
        auth:1,
});
const handleEdit = async (id: number) => {
  const res = await getOneRole(id);
  editForm.value = res.data.data;
  show.value = true;
};
const editRoleRef = ref<FormInstance>();
const handleUpdate = () => {
  editRoleRef.value?.validate(async (v) => {
    if (v) {
      const res = await upData(editForm.value, editForm.value.id);
      if (res.data.data.code === 10000) {
        ElMessage.success("更新成功");
        getData();
        show.value = false;
      }
    }
  });
};
// const openDialog = (id:number) => {
//     show.value=true;
//     roleForm.name=roleData.value.filter((item)=>{return item.id === id;})[0].name;
//     roleForm.auth=roleData.value.filter(item=>item.id==id)[0].auth;
//     /* roleData.value.find(item=>item.id===id)?.auth; */
// }

</script>

<style scoped>

</style>